import { useState, useEffect } from 'react'

const App = () => {
    const [count, setCount] = useState(10)
    const [proList, setProList] = useState([])

    // 只执行1次，相当于 componetDidMount
    useEffect(() => {
        fetch('http://121.89.205.189/api/pro/list')
            .then(res => res.json())
            .then(res => {
                console.log(res)
                setProList(res.data)
            })
        return () => {
            console.log(111)
        }
    }, [])

    const next = () => {
        fetch('http://121.89.205.189/api/pro/list?count=' + count)
            .then(res => res.json())
            .then(res => {
                console.log(res)
                setProList([...proList, ...res.data])
                setCount(count + 1)
            })
    }
    return (
        <div>
            <h1>useEffect - 副作用</h1>
            <button onClick={next}>下一页</button>
            {
                proList && proList.map(item => (
                    <div key={item.proid}>{item.proname}</div>
                ))
            }
        </div>
    )
}

export default App